<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>绑定style样式</title>
        <script
            type="text/javascript"
            src="../vue.js"
        ></script>
    </head>
    <style>
        .basic {
            background-color: lightyellow;
            height: 5em;
            width: 5em;
        }

    </style>
    </head>

    <body>
        <div id="root">
            <!--为什么属性显示未定义？已经在vue中定义过了啊-->
            //对象写法
            <div class="basic" v-bind:style="styleObj">{{name}}</div>
            <br><br><br>
            //数组写法
            <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>
            <br><br>
            <div class="basic" :style="styleArr">{{name}}</div>
        </div>
        <!--style样式
        :style="{fontSize:xxx}}"其中xxx是动态值
        :style="[a,b]"其中a，b是样式对象
        -->

        <script type="text/javascript">
            Vue.config.productionTip = false;
            const vm = new Vue({
                el: '#root',
                data: {
                    name: 'Marina',
                    styleObj: {
                        fontsize: '40px',
                        color: 'red',

                    },
                    styleObj2: {
                        fontsize: '40px',
                        color: 'red',
                        backgroundColor: 'blue'
                    },
                    styleArr: [
                        {
                            fontsize: '40px',
                            color: 'red',
                            backgroundColor: 'yellow'
                        },
                        {
                            fontsize: '40px',
                            color: 'red',
                            backgroundColor: 'gray'
                        },
                    ]
                },


            })
        </script>

    </body>
</html>